<template>
	<view class="content">
		<template v-if="ContentDataList.length>=1">
			<view class="evaluate" v-for="(item,index) in ContentDataList" :key="index">
				<view class="comment-item">
					<view class="evaluate-head">
						<image class="userimage" :src="item.userImg" mode=""></image>
						<view class="userinfo">
							<view class="user-name" style="font-size: 22rpx;">
								{{item.userName}}
							</view>
							<view class="evaluate-time" style="font-size: 22rpx;">
								{{item.time}}
							</view>
						</view>
					</view>
					<view class="evaluate-content">
						<view class="evaluate-content-text" style="font-size: 24rpx;">
							{{item.content}}
						</view>
						<view class="evaluate-content-img">
							<view class="content-img-item" v-for="(it,id) in JSON.parse(item.commentImage)" :key="id">
								<image class="content-image" :src="it.imgUrl" mode="" @tap="previewImage(item,id)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view style="height: 500rpx;display: flex; justify-content: center; align-items: center;" >该商品暂无评论</view>
		</template>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	export default{
		props:{
			shopId:String,
			type:String
		},
		data(){
			return{
				ContentDataList:[],
				ContentImage:[],
			}
		},
		mounted() {
			this.getContentData()
		},
		methods:{
			// 预览图片
			previewImage(item,index){
				JSON.parse(item.commentImage).forEach((it,id)=>{
					this.ContentImage.push(it.imgUrl)
				})
				uni.previewImage({
					urls:this.ContentImage ,//需要预览的图片连接列表
					current:this.ContentImage[index] //当前显示的图片连接
				})
			},
			getContentData(){
				$http.request({
					url:"/ContentData",
					method:'POST',
					header:{
						token:true
					},
					data:{
						id:this.shopId,
						type:this.type
					}
				}).then((res)=>{
					this.ContentDataList = res
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
			}
		}
	}
</script>

<style scoped>
.comment-item{
	width: 100%;
	height: 100%;
	border: 1rpx solid #ebebeb;
	margin-bottom: 16rpx;
	background-color: #ffffff;
	padding: 20rpx 30rpx 20rpx 30rpx;
}
.evaluate{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.evaluate-head{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.userimage{
	width: 80rpx;
	height: 80rpx;
	border-radius: 100%;
}
.userinfo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 10rpx;
}
.evaluate-content{
	display: flex;
	flex-direction: column;
}
.content-image{
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
}
.evaluate-content-img{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.content-img-item{
	margin-right: 30rpx;
	flex: 0 0 20%;
}
</style>